<template>
	<view class="full-height">
		<!-- 按钮组 -->
		<veiw class="defect-tools" v-if="showType === showTypeButton">
			<button v-show="assignVisible" :size="size" @click="handleAssign" class="button cat2bug-button-assign">{{$t('assign')}}</button>
			<button v-show="repairVisible" :size="size" @click="handleRepair" class="button cat2bug-button-repair">{{$t('repair')}}</button>
			<button v-show="rejectVisible" :size="size" @click="handleReject" class="button cat2bug-button-reject">{{$t('reject')}}</button>
			<button v-show="passVisible" :size="size" @click="handlePass" class="button cat2bug-button-pass">{{$t('pass')}}</button>
			<button v-show="openVisible" :size="size" @click="handleOpen" class="button cat2bug-button-open">{{$t('open')}}</button>
			<button v-show="closeVisible" :size="size" @click="handleClose" class="button cat2bug-button-close">{{$t('close')}}</button>
			<button v-show="editVisible" :size="size" @click="handleEdit" class="button cat2bug-button-modify">{{ $t('modify') }}</button>
			<button v-show="deleteVisible" :size="size" @click="handleDelete" class="button cat2bug-button-delete">{{$t('delete')}}</button>
		</veiw>
		<!-- 悬浮按钮 -->
		<uni-fab v-else-if="showType === showTypeFab" 
			ref="fab" 
			:pattern="pattern" 
			:content="fabButtons" 
			horizontal="right" 
			vertical="bottom"
			direction="vertical" 
			@trigger="trigger" 
			@fabClick="fabClick" />
		<!-- 修改对话框 -->
		<modify-popup ref="modifyPopup" @log="handleDefectLog"></modify-popup>
	</view>
</template>

<script>
	import { getDefect } from "@/api/system/defect.js"
	import {checkPermi} from "@/utils/permission";
	import ModifyPopup from "./modify-popup.vue"
	import { delProject } from "@/api/system/project";
	import { checkProjectDeletePermi, checkProjectEditPermi } from "@/utils/project.js"
	/** 显示按钮类型 */
	const SHOW_TYPE_BUTTON = 'button';
	/** 显示悬浮类型 */
	const SHOW_TYPE_FAB = 'fab';
	
	export default {
		name: 'ProjectTools',
		components: { ModifyPopup },
		model: {
		    prop: 'value',
		    event: 'input'
		},
		data() {
			return {
				showTypeButton: SHOW_TYPE_BUTTON,
				showTypeFab: SHOW_TYPE_FAB,
				title: 'uni-fab',
				directionStr: '垂直',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
			}
		},
		props: {
			/** 显示的类型，button：按钮；fab：悬浮 */
			showType: {
				type: String,
				validator: value => [SHOW_TYPE_BUTTON, SHOW_TYPE_FAB].includes(value),
				default: SHOW_TYPE_BUTTON
			},
			exclusions: {
			  type: Array,
			  default: ()=>[]
			},
			value: {
			  type: Object,
			  default: {
					  defectId: 2
				  }
			},
			isText: {
			  type: Boolean,
			  default: null
			},
			isShowIcon: {
			  type: Boolean,
			  default: null
			},
			size: {
			  type: String,
			  default: 'default'
			}
		},
		computed: {
			fabButtons() {
				let buttons = [];
				if(this.editVisible) {
					buttons.push({
						iconPath: '/static/images/common/modify.png',
						selectedIconPath: '/static/images/common/modify_.png',
						text: this.$i18n.t('modify'),
						active: false
					});
				}
				if(this.deleteVisible) {
					buttons.push({
						iconPath: '/static/images/common/delete.png',
						selectedIconPath: '/static/images/common/delete_.png',
						text: this.$i18n.t('delete'),
						active: false
					});
				}
				buttons.push({
					iconPath: '/static/images/common/back.png',
					selectedIconPath: '/static/images/common/back_.png',
					text: this.$i18n.t('back'),
					active: false
				});
				return buttons;
			},
		    /** 获取当前用户id */
		    currentUserId: function() {
		        return this.$store.state.user.id;
		    },
			/** 是否显示删除按钮 */
		    deleteVisible: function () {
				return checkProjectDeletePermi(this.value, this.currentUserId);
		    },
			/** 是否显示编辑按钮 */
		    editVisible: function () {
		        return checkProjectEditPermi(this.value, this.currentUserId);
		    },
		  },
		  methods:{
			trigger(e) {
				switch(e.item.text) {
					case this.$i18n.t('modify'):
						this.handleEdit();
						break;
					case this.$i18n.t('delete'):
						this.handleDelete();
						break;
					case this.$i18n.t('back'):
						this.handleBack();
						break;
				}
			},
			fabClick() {},
		    /** 打开编辑窗体 */
		    handleEdit(event) {
		      this.$refs.modifyPopup.open(this.value);
		    },
			/** 返回上一页面 */
			handleBack() {
				uni.navigateBack();
			},
		    logHandle(log) {
		      this.$emit('log',log);
		    },
		    /** 点击收藏操作 */
		    clickCollectHandle(collect, defect,isRefreshList) {
		      // 保存收藏状态
		      updateUserDefect(defect.defectId, {
		        defectId: defect.defectId,
		        userId: this.currentUserId,
		        collect: collect?1:0
		      }).then(res=>{
		        this.$set(defect, 'collect', collect);
		        // 如果collect参数存在，表明是点击头部的收藏按钮触发
		        if(isRefreshList) {
		          this.$emit('update',this.value);
		        }
		        if(collect) {
		          this.$message.success(this.$t('collect-success').toString());
		        } else {
		          this.$message.success(this.$t('cancel-success').toString());
		        }
		      });
		    },
		    /** 删除按钮操作 */
		    handleDelete(event) {
		      const projectIds = this.value.projectId;
		      this.$modal.confirm(
		        this.$i18n.t('defect.delete-defect'),
		        this.$i18n.t('prompted').toString(),
		        {
		          confirmButtonText: this.$i18n.t('delete').toString(),
		          cancelButtonText: this.$i18n.t('cancel').toString(),
		          confirmButtonClass: 'delete-button',
		          type: "warning"
		        }).then(function() {
		        return delProject(projectIds);
		      }).then(() => {
		        this.$emit('delete',this.value);
				this.handleBack();
		        this.$modal.msgSuccess(this.$t('delete.success'));
		      }).catch(() => {});
		      event.stopPropagation();
		    },
		}
	}
</script>

<style lang="scss">
	.defect-tools {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: 100vw;
		height: 100%;
		> .button {
			height: 100%;
			border-radius: 0 !important;  
			border-width: 0 !important;
			display: inline-flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>